﻿<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" %>
<%@ include file="/share/_meta.jsp" %>
<%@ include file="/share/_footer.jsp" %>
<nav class="breadcrumb"><i class="Hui-iconfont">&#xe67f;</i> 首页 <span class="c-gray en">&gt;</span>系统管理中心 <span class="c-gray en">&gt;</span> 工作报表
	<a class="btn btn-success radius r" style="line-height:1.6em;margin-top:3px" href="javascript:location.replace(location.href);" title="刷新" ><i class="Hui-iconfont">&#xe68f;</i></a>
</nav>
<div class="page-container">
	<form class="codeView docs-example">
		账期开始时间:<input type="text" class="input-text radius size-L" name="periodStart" style="width:150px" id="periodStart" placeholder="如2016">
		账期结束时间:<input type="text" class="input-text radius size-L" name="periodEnd" style="width:150px" id="periodEnd" placeholder="如2030">
<%--
		<input type="text" placeholder="账期查询" class="input-text radius size-L" name="acctPeriod" style="width:150px" id="acctPeriod" >
--%>
		<div class="form-group">
			<select class="form-control" name="parentId" style="width:250px" id="parentId">
				<option value='' disabled selected style='display:none;'>小区</option>
				<option value=''>全部</option>
				<c:forEach items="${parentList}" var="item">
					<option value="${item.id}" <c:if test="${query.parentId==item.id }">selected</c:if>>${item.name}</option>
				</c:forEach>
			</select>
		</div>
		<div class="form-group" id="acctPeriodDiv">
			<select class="form-control" name="acctPeriod" style="width:250px" id="acctPeriod">
				<c:forEach items="${acctPeriodList}" var="item">
					<option value="${item.acctPeriod}">${item.acctPeriod}</option>
				</c:forEach>
			</select>
		</div>
		<button type="button" class="btn btn-secondary radius size-L" onclick="queryList()">查&nbsp;询</button>
	</form>

	<div class="panel panel-default mt-20">
		<div class="panel-header">
			数据列表
		</div>
		<div class="panel-body">
			<table class="table table-border table-bordered table-bg table-hover table-sort table-striped">
				<thead>
				<tr class="text-c">
					<th>实收金额</th>
					<th>未收金额</th>
					<th>开票金额</th>
					<th>已缴户数</th>
					<th>未缴户数</th>
					<th>缴费率</th>
					<th>收费类型</th>
				</tr>
				</thead>
				<tbody>
				</tbody>
			</table>
			<br>
			<br>
		</div>
	</div>
</div>

<script type="text/javascript" src="${pageContext.request.contextPath}/h-ui/lib/datatables/1.10.0/jquery.dataTables.min.js"></script>
<script type="text/javascript" src="${pageContext.request.contextPath}/h-ui/common/laydate.js"></script>
<script type="text/javascript">
	$(function(){
//        laydate.render({
//            elem: '#startTime' //指定元素
//            ,format: 'yyyy-MM-dd'
//        });
//        laydate.render({
//            elem: '#endTime' //指定元素
//            ,format: 'yyyy-MM-dd'
//        });
		queryList();
        //queryAcctPeriod();

		$("#parentId").change(function(){
            queryAcctPeriod()
		});

	})

	function queryAcctPeriod(){
        $("#acctPeriod").html("");
        $.ajax({
            type: 'POST',
            url: '${pageContext.request.contextPath }/rest/billAccount/billAccountAcct',
            dataType: 'json',
            data:{
                housingId : $("#parentId option:selected").val()
            },
            success: function(data){
                var html = "<option value=''>全部</option>";
                $.each(data,function(index,item){
                    if(item!=null&&item!="null"){
                        console.log(item);
                        html += "<option value="+item.acctPeriod+">"+item.acctPeriod+"</option>";
					}
                })
                $("#acctPeriod").append(html);
            },
            error:function(data) {
                layer.alert('error!',{icon:1,time:1000});
            }
        })
	}

	function queryList(){
		$(".table-sort").dataTable().fnDestroy();
		$(".table-sort").DataTable({
			bStateSave: false,
			aoColumnDefs: [{bSortable: false}],
			pageLength: 10,
            paging: false,
            searching: false,
			bInfo:false,
			bFilter: false,
			bSort:false,
			aLengthMenu:[10],
			serverSide:true,//实现后台分页
			lengthChange: false,
			bPaginate: true,
			ajax: {
				url: "${pageContext.request.contextPath}/rest/billAccount/tableWorkReport",
				dataSrc: "data",
				data: function ( d ) {
					d.housingId = $("#parentId option:selected").val();
					d.acctPeriod = $("#acctPeriod option:selected").val();
                    d.periodStart = $("#periodStart").val();
                    d.periodEnd = $("#periodEnd").val();
				}
			},
			/*fnDrawCallback: function () {
			 var api = this.api();
			 api.column(0).nodes().each(function (cell, i) {
			 cell.innerHTML = i + 1;
			 });
			 },*/
			aoColumns: [//列绑定
                {"data": "ypayCount"},
                {"data": "npayCount"},
                {"data": "ticketCount"},
				{"data": "ypayAmount"},
				{"data": "npayAmount"},
				{"data": "sumCount"},
				{"data": "costTypeName"}
			],
			aoColumnDefs: [//列定义
				{
					"aTargets": [0],
					"mData": "ypayCount",
					"mRender": function (data, type, full) {//全部列值可以通过full.列名获取,一般单个列值用data PS:这里的render是有多少列就执行多少次方法。。。不知道为啥
						return data;
					}
				}, {
					"aTargets": [1],
					"mData": "npayCount",
					"mRender": function (data, type, full) {//全部列值可以通过full.列名获取,一般单个列值用data PS:这里的render是有多少列就执行多少次方法。。。不知道为啥
						return data;
					}
				}, {
					"aTargets": [2],
					"mData": "ticketCount",
					"mRender": function (data, type, full) {//全部列值可以通过full.列名获取,一般单个列值用data PS:这里的render是有多少列就执行多少次方法。。。不知道为啥
						return data;
					}
				}, {
					"aTargets": [3],
					"mData": "ypayAmount",
					"mRender": function (data, type, full) {//全部列值可以通过full.列名获取,一般单个列值用data PS:这里的render是有多少列就执行多少次方法。。。不知道为啥
                        if(data==0){
                            return "";
                        }
						return data;
					}
				}, {
					"aTargets": [4],
					"mData": "npayAmount",
					"mRender": function (data, type, full) {//全部列值可以通过full.列名获取,一般单个列值用data PS:这里的render是有多少列就执行多少次方法。。。不知道为啥
						if(data==0){
						    return "";
						}
						return data;
					}
				}, {
					"aTargets": [5],
					"mData": "sumCount",
					"mRender": function (data, type, full) {//全部列值可以通过full.列名获取,一般单个列值用data PS:这里的render是有多少列就执行多少次方法。。。不知道为啥
						if(data==null||data=="null"){
						    return "";
						}
						var num = full.ypayCount/data;
                        	data = num.toFixed(2)*100
						return data+"%";
					}
				}, {
					"aTargets": [6],
					"mData": "costTypeName",
					"mRender": function (data, type, full) {//全部列值可以通过full.列名获取,一般单个列值用data PS:这里的render是有多少列就执行多少次方法。。。不知道为啥
						return data;
					}
				}
			]
		})
	}

</script>

